<template>
  <component :is="cardComponent" v-bind="cardProps" :class="cardClasses">
    <!-- 封面图片 -->
    <template v-if="cover" #cover>
      <div class="card-cover" :class="{ 'hover-zoom': hoverZoom }">
        <img
          :src="cover"
          :alt="title"
          class="w-full h-full object-cover transition-transform duration-300"
        />
      </div>
    </template>

    <!-- 头部内容 -->
    <template v-if="$slots.header || title" #header>
      <slot name="header">
        <div class="card-header">
          <h3 class="card-title">{{ title }}</h3>
          <div v-if="$slots.extra" class="card-extra">
            <slot name="extra"></slot>
          </div>
        </div>
      </slot>
    </template>

    <!-- 主要内容 -->
    <template #default>
      <div class="card-content">
        <slot>
          <p v-if="description" class="card-description">
            {{ description }}
          </p>
        </slot>
      </div>
    </template>

    <!-- 底部内容 -->
    <template v-if="$slots.footer" #footer>
      <div class="card-footer">
        <slot name="footer"></slot>
      </div>
    </template>

    <!-- 操作按钮 -->
    <template v-if="$slots.actions" #actions>
      <div class="card-actions">
        <slot name="actions"></slot>
      </div>
    </template>
  </component>
</template>

<script setup>
import { computed } from "vue";
import { ElCard } from "element-plus";
import { Card as ACard } from "@arco-design/web-vue";

const props = defineProps({
  isAdmin: {
    type: Boolean,
    default: false,
  },
  title: {
    type: String,
    default: "",
  },
  description: {
    type: String,
    default: "",
  },
  cover: {
    type: String,
    default: "",
  },
  shadow: {
    type: String,
    default: "hover",
    validator: (value) => ["always", "hover", "never"].includes(value),
  },
  bordered: {
    type: Boolean,
    default: true,
  },
  hoverable: {
    type: Boolean,
    default: false,
  },
  loading: {
    type: Boolean,
    default: false,
  },
  hoverZoom: {
    type: Boolean,
    default: false,
  },
  customClass: {
    type: String,
    default: "",
  },
});

// 计算卡片组件
const cardComponent = computed(() => (props.isAdmin ? ACard : ElCard));

// 计算卡片属性
const cardProps = computed(() => {
  if (props.isAdmin) {
    return {
      title: props.title,
      bordered: props.bordered,
      hoverable: props.hoverable,
      loading: props.loading,
    };
  } else {
    return {
      shadow: props.shadow,
      "body-style": { padding: "16px" },
    };
  }
});

// 计算卡片类名
const cardClasses = computed(() => [
  props.customClass,
  "global-card",
  {
    "hover:shadow-lg": props.hoverable && !props.isAdmin,
    "transition-shadow duration-300": props.hoverable,
    "overflow-hidden": props.cover,
  },
]);
</script>

<style lang="scss" scoped>
.global-card {
  @apply bg-white rounded-lg;

  .card-cover {
    @apply h-48 overflow-hidden;

    &.hover-zoom img {
      @apply transform hover:scale-110;
    }
  }

  .card-header {
    @apply flex items-center justify-between p-4 border-b border-gray-100;

    .card-title {
      @apply text-lg font-medium text-gray-900;
    }

    .card-extra {
      @apply flex items-center;
    }
  }

  .card-content {
    @apply p-4;

    .card-description {
      @apply text-gray-600 text-sm leading-relaxed;
    }
  }

  .card-footer {
    @apply p-4 border-t border-gray-100;
  }

  .card-actions {
    @apply flex items-center justify-end space-x-2 p-4 border-t border-gray-100;
  }
}

:deep(.el-card__header) {
  @apply p-0;
}

:deep(.arco-card-header) {
  @apply p-0;
}
</style>
